require(['./config'],()=>{
    require(['template','header','footer','elevatezoom','fly'],(template,header)=>{
        class Details{
            constructor(){
                this.getDetails().then(()=>{
                    this. bigImg()
                    this. shopcartadd()
                    this.toShopCart()
                })
                
            }
            // 获取数据渲染
            getDetails(){
                const id=location.search.slice(4)
                return new Promise((resolve,reject)=>{
                        $.get(`http://www.xiongmaoyouxuan.com/api/detail`,{id},resp=>{
                        if(resp.code===200){
                            const{
                                id,
                                title,
                                photo,
                                couponStatus,
                                originPrice,
                                price,
                                saleNum
                            }=resp.data.detail
                            this.detail={
                                id,
                                title,
                                photo,
                                couponStatus,
                                originPrice,
                                price,
                                saleNum
                            }
                            $('#navDetail').html(template('navDetailTemplate',{title}))
                            $('#contDetail').html(template('contDetailTemplate',{...this.detail}))
                            resolve()
                        }
                    })
                })
                
            }
            // 放大镜效果
           bigImg(){
                $('.zoom-image').elevateZoom({
                    gallery: 'gal1' // 小图容器盒子，ul的id（不加#）
                })
            }
            // 加减效果
            shopcartadd(){
                let count=1
               $('#shopcartadd').on('click',()=>{
               count++
                  $('#shopcarttxt').val(count)
                    
                })
               $('#shopcartdel').on('click',()=>{
                count--
                   if(count<2) count=1
                   $('#shopcarttxt').val(count)
               })
            }
            // 加入购物车
            toShopCart(){
                $('#add-to-cart').on('click',()=>{
                    let cart=localStorage.getItem('cart')
                    if(cart){
                        cart=JSON.parse(cart)
                        const isExist=cart.some(shop=>{
                            return shop.id===this.detail.id
                        })
                        if(isExist){
                            cart=cart.map(shop=>{
                                if(shop.id===this.detail.id){
                                    shop.count=0
                                    shop.count += Number($('#shopcarttxt').val())
                                }
                                return shop
                            })
                        }else{
                            cart.push({...this.detail,count:1,check:true})
                        }
                        localStorage.setItem('cart',JSON.stringify(cart))
                    }else{
                       localStorage.setItem('cart',JSON.stringify([{...this.detail,count:1,check:true}])) 
                    }
                    // $('<div class="fly">').fly({
                    //     start:{
                    //       left: e.clientX,  //开始位置（必填）#fly元素会被设置成position: fixed
                    //       top: e.clientY //开始位置（必填）
                    //     },
                    //     end:{
                    //       left: $('.toshopcart').offset().left, //结束位置（必填）
                    //       top: $('.toshopcart').offset().top  //结束位置（必填）
                    //     },
                    //     speed: 0.8, //越大越快，默认1.2
                    //     vertex_Rtop: 20, //运动轨迹最高点top值，默认20
                    //     onEnd: function(){
                    //       this.destroy()
                    //     } //结束回调
                    // })
                //    调用header的方法计算购物车数量
                header.calcCartCount()
                }) 
            }
        }
        new Details()
    })
})
